<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="flowable layout">
    <BoxZoom @on-rate="handleRate" />
    <ZoomBox :snum="zoomNumber">
      <BoxItem :tree="nodes"
      :activeId="activeId"
      :onActive="handleActive"
      :onAdd="handleAdd"
      :onDelete="handleDelete"
      :onDeleteBranch="handleDeleteBranch"
      :onAddBranch="handleAddBranch" />
      <NodeEnd />
    </ZoomBox>
    <PopDrawer
    :isShow="popShow"
    :item="activeItem"
    @on-close="handleClosePop"
    @on-save="handlePopSave">
      <component :is="currentComponent"
      :item="activeItem"
      @on-item="handleSaveItem"
      :procId="procId" />
    </PopDrawer>
  </div>
</template>

<script>
import BoxZoom from './canvans/BoxZoom.vue'
import Item from './node/Item.vue'
import { Btns, NodeBox, NodeEnd } from './node/index'
import { BranchBox, BranchCol, BoxCondition, ItemCondition } from './branch/index'
import ZoomBox from './canvans/ZoomBox.vue'
import { nodeType, rootNodes2 } from '@/framework-code/utils/constants'
import Treenode from './Treenode.vue'
import BoxItem from './BoxItem.vue'
import tree3 from './tree3'
import PopModal, { PopTodo, PopCC, PopStart, PopBranch, PopDrawer } from './popform/index'
export default {
  props: {
    mData: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    BoxZoom,
    Item,
    Btns,
    NodeBox,
    ZoomBox,
    NodeEnd,
    BranchBox,
    BranchCol,
    BoxCondition,
    ItemCondition,
    Treenode,
    BoxItem,
    PopModal,
    PopTodo,
    PopCC,
    PopBranch,
    PopStart,
    PopDrawer
  },
  data() {
    return {
      zoomNumber: 1,
      nodes: {},
      activeId: '',
      activeItem: {},
      popShow: false,
      procId: ''
    }
  },
  computed: {
    currentComponent() {
      const {
        type
      } = this.activeItem
      switch (type) {
        case nodeType.CCTASK:
          return 'PopCC'
        case nodeType.USERTASK:
          return 'PopTodo'
        case nodeType.BRANCHTASK:
          return 'PopBranch'
        default:
          return 'PopStart'
      }
    }
  },
  watch: {
    activeItem(val) {
      if (val) {
        this.activeId = val.id ? val.id : ''
      }
    },
    activeId(val) {
      if (val) {
        this.popShow = true
      }
    },
    nodes: {
      handler(val) {
        this.$emit('on-mode', 'wfSimpleTaskInfo', val)
      },
      deep: true
    }
  },
  methods: {
    handleClosePop(val) {
      this.popShow = val
      this.activeItem = {}
    },
    handleRate(rate) {
      this.zoomNumber = rate / 100
    },
    handleActive(item) {
      this.activeItem = item
    },
    handleAddBranch({ id, conditions }) {
      const n = conditions.length

      const branchN = {
        id: tree3.genId(),
        pid: id,
        type: nodeType.BRANCHTASK,
        taskName: `条件${n + 1}`
      }

      const arr = tree3.toArray(this.nodes)
      arr.push(branchN)
      this.nodes = tree3.toTree(arr)
    },
    handleAdd(item, type) {
      const id = tree3.genId()
      const newItem = {
        id,
        pid: item.id,
        type
      }

      const arr = tree3.toArray(this.nodes)

      if (item.type === nodeType.ROUTE) {
        if (item.child && item.child.id) {
          if (type === nodeType.BRANCHTASK) {
            const newItem2 = {
              id: tree3.genId(),
              pid: newItem.id,
              type: nodeType.ROUTE
            }
            const { branch0, branch1 } = this.createBranch(newItem2.id)
            this.setBranch0(arr, newItem, [branch0, branch1, newItem2])
            tree3.arraySetPid(arr, item.child.id, branch0.id)
          } else {
            this.activeItem = newItem
            tree3.arraySetPid(arr, item.child.id, id)
          }
        } else {
          if (type === nodeType.BRANCHTASK) {
            const newItem2 = {
              id: tree3.genId(),
              pid: newItem.id,
              type: nodeType.ROUTE
            }
            const { branch0, branch1 } = this.createBranch(newItem2.id)
            this.setBranch0(arr, newItem, [branch0, branch1, newItem2])
          } else {
            this.activeItem = newItem
          }
        }
      } else {
        if (type === nodeType.BRANCHTASK) {
          const { branch0, branch1 } = this.createBranch(id)
          this.setBranch0(arr, newItem, [branch0, branch1])

          const firstChild = tree3.arrayFindChild(arr, item.id)
          if (firstChild.length) {
            tree3.arraySetPid(arr, firstChild[0].id, branch0.id)
          }
        } else {
          this.activeItem = newItem
        }
        tree3.dealWithPid(arr, item.id, id)
      }
      arr.push(newItem)
      // console.log(arr)
      this.nodes = tree3.toTree(arr)
    },
    handleDelete(item) {
      const arr = tree3.toArray(this.nodes)
      tree3.arrayDropById(arr, item.id)
      tree3.dealWithPid(arr, item.id, item.pid)
      this.nodes = tree3.toTree(arr)
    },
    handleDeleteBranch(item) {
      const arr = tree3.toArray(this.nodes)
      tree3.arrayDropById(arr, item.id)
      const branchs = tree3.arrayFindBranchs(arr, item.pid)
      if (branchs.length === 1) {
        const routes = tree3.arrayFindRoute(arr, item.pid)
        const firstChild = tree3.arrayFindChild(arr, branchs[0].id)
        const lastChild = tree3.arrayLastChild(arr, branchs[0].id)
        if (routes.length) {
          if (firstChild.length === 1) {
            tree3.arraySetPid(arr, firstChild[0].id, routes[0].pid)
          }

          if (lastChild.length === 1) {
            tree3.dealWithPid(arr, routes[0].id, lastChild[0].id)
          } else if (lastChild.length === 0) {
            tree3.dealWithPid(arr, routes[0].id, routes[0].pid)
          }

          tree3.arrayDropById(arr, routes[0].id)
          tree3.arrayDropById(arr, branchs[0].id)
        }
      }
      this.nodes = tree3.toTree(arr)
    },
    createBranch(id) {
      const branch0 = {
        id: tree3.genId(),
        pid: id,
        type: nodeType.BRANCHTASK,
        taskName: '条件1'
      }
      const branch1 = {
        id: tree3.genId(),
        pid: id,
        type: nodeType.BRANCHTASK
      }
      return {
        branch0,
        branch1
      }
    },
    setBranch0(arr, newItem, nodes) {
      newItem.type = nodeType.ROUTE
      nodes.map(node => {
        arr.push(node)
      })
      this.activeItem = nodes[0]
    },
    handlePopSave() {
      this.popShow = false
      this.activeItem = {}
    },
    handleSaveItem(item, isBranch) {
      if (item?.id && !isBranch) {
        const arr = tree3.toArray(this.nodes)
        tree3.arrayEditById(arr, item.id, item)
        this.nodes = tree3.toTree(arr)
      }
    }
  },
  created() {
    const {
      wfSimpleTaskInfo,
      wfSimpleProc
    } = this.mData

    if (wfSimpleTaskInfo) {
      this.nodes = wfSimpleTaskInfo
      this.procId = wfSimpleProc?.id ? wfSimpleProc.id : ''
    } else {
      this.nodes = rootNodes2
    }
  }
}
</script>

<style lang="scss" scoped>
$bgColor: #f0f2f5;
.flowable {
  // position: absolute;
  // left: 0;
  // top: 50px;
  // bottom: 0;
  // right: 0;
  // z-index: 1;
  // background-color: $bgColor;
}
.layout {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: column nowrap;
}

</style>
